<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">{{ title }}</block>
		</cu-custom>
		<view class="cu-bar bg-white solids-top margin-top-xs cu-solid-bottom">
			<view class="action">
				<text class="cuIcon-file text-blue"></text>
				{{ articleTitle }}
			</view>
		</view>
		<view class="cu-card article no-card bg-white padding radius shadow-lg cu-paddingt0">
			<view class="text-center margin-bottom text-lg  text-black"></view>
			<view class="text-content">
				<view class="u-content"><u-parse :show-with-animation="true" :use-cache="true" :html="content" :selectable="true" :lazy-load="true"></u-parse></view>
			</view>
		</view>
		<block v-if="downUrl != ''">
			<view class="cu-bar bg-white solids-top margin-top-xs cu-solid-bottom">
				<view class="action">
					<text class="cuIcon-down text-blue"></text>
					下载地址（复制后请在浏览器中打开）
				</view>
				<view class="action" @click="favorClicked"><text :class="favorIcon ? 'cuIcon-favorfill' : 'cuIcon-favor'" class="text-blue"></text></view>
			</view>
			<view class="cu-card article no-card bg-white padding-sm" @click="copyText(downUrl)">
				<view class="cu-btn  line-blue radius">{{ downUrl }}</view>
			</view>
			<view class="cu-card article no-card bg-white padding-sm" v-if="downPwd != ''">
				<view class="cu-btn  line-orange radius">{{ downPwd }}</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '文章详情',
			articleID: '',
			articleTitle: '',
			content: '',
			detailArticleUrl: '',
			downUrl: '',
			downPwd: '',
			itemData: null,
			favorIcon: false
		};
	},
	onLoad(options) {
		this.articleID = options.id;
		this.detailArticleUrl = uni.$AppConfig.requestConfig.detailArticleUrl;
		this.getInitData();

	},
	onReachBottom() {

	},
	methods: {
		getInitData() {
			const _this = this;
			uni.showLoading({
				title: '加载中'
			});
			uni.request({
				url: _this.detailArticleUrl, //仅为示例，并非真实接口地址。
				method: 'POST',
				data: {
					id: _this.articleID
				},
				success: res => {
					if (res == 'undefined') {
						uni.showToast({
							title: '数据加载成功',
							icon: none,
							duration: 2000
						});
					}

					let resTrueData = res.data;
					if (resTrueData.code == 1) {
						console.log(resTrueData.data);
						const reqData = resTrueData.data;
						const history = new uni.$MyLocalStoreUtil('history_record');

						history.setLocalData(reqData);

						_this.itemData = reqData;

						_this.articleTitle = reqData.title;
						_this.content = reqData.content;
						_this.downUrl = reqData.diy_down_url;
						_this.downPwd = reqData.diy_down_pwd;

						_this.getFavorIcon();
					} else {
						_this.getInitDataErrMsg();
					}
				},
				fail: err => {
					_this.getInitDataErrMsg();
				},
				complete: res => {
					console.log(res);
					uni.hideLoading();
				}
			});
		}, // getInitData end;

		getInitDataErrMsg() {
			uni.showToast({
				title: '数据加载失败',
				icon: 'error',
				duration: 2000
			});
		},
		copyText(text) {
			console.log(text);
			uni.setClipboardData({
				data: text, //要被复制的内容
				success: () => {
					//复制成功的回调函数
					uni.showToast({
						//提示
						title: '复制成功'
					});
				}
			});
		},
		previewImg(e) {
			let imgurl = e.currentTarget.dataset.imgurl;
			let imgArr = [];
			imgArr[0] = imgurl;
			uni.previewImage({
				current: 0,
				urls: imgArr
			});
		},
		getFavorIcon() {
			const _this = this;
			const history = new uni.$MyLocalStoreUtil('favor_record');
			const localData = history.getLocalData();
			const itemData = _this.itemData;
			
			if(localData != null) {
				let isExist = false;
				_this.favorIcon = isExist;
				localData.forEach(function(item, index){
					if(item.id === itemData.id) {
						isExist = true;
						_this.favorIcon = isExist;
						return;
					}
				});
					
			} else {
				_this.favorIcon = false;
			}
		},
		favorClicked() {
			const _this = this;
			const history = new uni.$MyLocalStoreUtil('favor_record');
			
			_this.favorIcon = !_this.favorIcon;
			console.log(_this.favorIcon, history.getLocalData())
			
			if(_this.favorIcon) {
				history.setLocalData(_this.itemData);
			} else {
				history.delLocalData(_this.itemData);
			}
		}
	}
};
</script>

<style>
.cu-paddingt0 {
	padding-top: 0;
}
.cu-solid-bottom {
	border-bottom: 1px solid #eeeeee;
}
</style>
